<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

//控制充值金额样式
const itemIndex = ref(0);
//其他金额
const otherAmountFlag = ref(true);
const otherAmount = ref(0);
//控制警告窗显示隐藏
const warningWindow = ref(false);
//充值金额
const rechargeAmount = ref(1000);
//控制密码输入键盘显示隐藏
const keyBoard = ref(false);
//vant
const valueVant = ref("");
const showKeyboard = ref(true);
const errorInfo = ref("");

// vue3自带方法
const router = useRouter();
const route = useRoute();

watch(otherAmount, (nv: Number) => {
  if (nv > 1999) {
    otherAmount.value = 1999;
    warningWindow.value = true;
  }
  rechargeAmount.value = otherAmount.value * 100;
});
watch(valueVant, (value: string) => {
  if (value.length === 6 && value !== "123456") {
    errorInfo.value = "密码错误";
  } else if (value.length === 6 && value == "123456") {
    errorInfo.value = "充值成功";
    setTimeout(() => {
      showKeyboard.value = false;
      keyBoard.value = false;
      errorInfo.value = "密码为6位数字";
      valueVant.value = "";
      localStorage.setItem(
        "price",
        rechargeAmount.value + JSON.parse(localStorage.getItem("price") as any)
      );
    }, 1000);
  }
});
</script>

<template>
  <div class="topup_view">
    <nav>
      <div @click="router.go(-1)" class="app"></div>
      <h1>{{ route.params.value }}充值</h1>
      <div class="sourch">
        <p @click="router.push('/bookshelfv')">书架</p>
      </div>
    </nav>
    <!-- 充值金额 -->
    <p class="p">请选择充值金额</p>
    <div class="recharge_amount">
      <div
        class="item"
        :class="{ con: itemIndex == 0 }"
        @click="(itemIndex = 0), (rechargeAmount = 10 * 100)"
      >
        <h1>10元</h1>
        <span>1000书币</span>
      </div>
      <div
        class="item"
        :class="{ con: itemIndex == 1 }"
        @click="(itemIndex = 1), (rechargeAmount = 20 * 100)"
      >
        <h1>20元</h1>
        <span>2000书币</span>
      </div>
      <div
        class="item"
        :class="{ con: itemIndex == 2 }"
        @click="(itemIndex = 2), (rechargeAmount = 30 * 100)"
      >
        <h1>30元</h1>
        <span>3000书币</span>
      </div>
      <div
        class="item"
        :class="{ con: itemIndex == 3 }"
        @click="(itemIndex = 3), (rechargeAmount = 50 * 100)"
      >
        <h1>50元</h1>
        <span>5000书币</span>
      </div>
      <div
        class="item"
        @click="itemIndex = 4"
        @mouseenter="otherAmountFlag = false"
        @mouseleave="otherAmountFlag = true"
      >
        <span class="con" v-if="otherAmountFlag">其他金额</span>
        <h1 v-if="!otherAmountFlag">
          <input type="text" v-model="otherAmount" />
          元
        </h1>
        <span v-if="!otherAmountFlag">{{ otherAmount * 100 }}书币</span>
      </div>
    </div>
    <!-- 充值按钮 -->
    <div class="prepaid_phone_button">
      <button @click="(keyBoard = true), (showKeyboard = true)">充值</button>
    </div>
    <!-- vip介绍 -->
    <div class="introduced">
      <h6></h6>
      <ul>
        <li>建议使用微信6.0.2以上版本</li>
      </ul>
    </div>
    <!-- 警告窗 -->
    <div class="warning_window" v-if="warningWindow">
      <p>
        <img
          src="https://img.xmkanshu.com/operateimg/img/img/11733/11733.png"
          alt="img"
        />请输入1999元以下的整数金额
      </p>
      <button @click="warningWindow = false">确定</button>
    </div>
    <!-- 充值框 -->
    <van-password-input
      :value="valueVant"
      info="密码为 6 位数字"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
      class="van_password_input"
      v-if="keyBoard"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      v-model="valueVant"
      :show="showKeyboard"
      @blur="(showKeyboard = false), (keyBoard = false), (valueVant = '')"
      v-if="keyBoard"
    />
  </div>
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 36px;
    height: 36px;
    background: url("/public/img/personalCenter/left.png") no-repeat 12px 0px;
    background-size: 18px 18px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 18px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 20px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 14px;
      color: #333;
    }
  }
}
.p {
  padding: 0 20px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  color: #888;
}
.recharge_amount {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  .item {
    width: 31%;
    padding: 10px 0;
    margin-right: 8px;
    padding-bottom: 25px;
    border: 1px solid #e3e3e3;
    background-color: #fff;
    text-align: center;
    margin-bottom: 10px;
    &:nth-of-type(3n) {
      margin-right: 0;
    }
    &.con {
      border: 1px solid #6e6e6e;
    }
    h1 {
      font-size: 16px;
      color: #333;
      font-weight: normal;
    }
    input {
      width: 42px;
      height: 18px;
      border: none;
      text-align: right;
      font-size: 16px;
      color: #f54b41;
    }
    span {
      font-size: 12px;
      color: #aaa;
      &.con {
        font-size: 16px;
        position: relative;
        top: 17px;
      }
    }
  }
}
.prepaid_phone_button {
  margin-top: 10px;
  text-align: center;
  button {
    width: 335px;
    height: 40px;
    background-color: #f54b41;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 3px;
  }
}
.introduced {
  margin-top: 40px;
  h6 {
    border-bottom: 1px solid #e3e3e3;
    margin: 0 20px;
    position: relative;
    &::before {
      display: block;
      content: "温馨提示";
      font-size: 13px;
      font-weight: normal;
      color: #888;
      background: #f5f5f5;
      padding: 0px 10px;
      position: absolute;
      left: 50%;
      margin-left: -50px;
      top: -8px;
    }
  }
  ul {
    padding: 0 20px;
    margin-top: 20px;
    li {
      font-size: 13px;
      color: #aaa;
      line-height: 20px;
    }
  }
}
.warning_window {
  padding: 15px;
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  p {
    margin-top: 10px;
    color: #2e343f;
    font-size: 15px;
    display: flex;
    align-items: center;
    img {
      width: 18px;
      height: 18px;
      margin-right: 7px;
    }
  }
  button {
    margin-top: 20px;
    margin-left: 17px;
    border: 1px solid #df6900;
    background-color: #df6900;
    color: #fff;
    font-size: 14px;
    width: 215px;
    height: 40px;
  }
}
footer {
  p {
    text-align: center;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
}
.van_password_input {
  top: -65px;
}
.van-password-input__info {
  position: relative;
  top: -17px;
}
.van-password-input__error-info {
  position: relative;
  top: -10px;
}
</style>